<template>
  <el-drawer
    :title="type === 'account' ? '选择账号' : '选择分组'"
    :visible.sync="show"
    direction="rtl"
    :before-close="handleClose"
    :modal-append-to-body="false"
    size="50%"
  >
    <div class="drawer-container flex-v h-100">
      <div v-if="type === 'account'" class="flex-b align-center drawer-header">
        <div class="border">
          <div class="flex align-center mao-radio-button-list">
            <mao-radio-button
              v-for="item in tabList"
              :key="item.value"
              v-model="platform"
              :value="item.value"
              :label="item.value"
            >
              <div class="flex-c align-center">
                <img :src="item.icon" class="icon" crossorigin="anonymous">
                {{ item.name }}
              </div>
            </mao-radio-button>
          </div>
        </div>
        <el-checkbox v-model="checkAll">全选</el-checkbox>
      </div>
      <div class="f1">
        <div class="list">
          <div
            v-for="(item, index) in list"
            :key="item.id"
            style="height: fit-content"
          >
            <AccountItem
              v-if="type === 'account' && item.id"
              :active="checkAll"
              :item="item"
              :index="index"
            />
            <GroupItem
              v-if="type === 'group' && item.id"
              :active="checkAll"
              :item="item"
              :index="index"
            />
          </div>
        </div>
      </div>

      <div
        class="flex-b align-center"
        style="
          padding-top: 10px;
          border-top: 1px solid rgba(128, 128, 128, 0.2);
        "
      >
        <div />
        <!-- <el-pagination
            :current-page="pageMap.page"
            :page-size="pageMap.pageSize"
            :total="pageMap.total"
            @current-change="initVideoList"
          /> -->
        <div class="flex-e align-center">
          <el-button
            type="default"
            style="margin-right: 10px"
            @click="$emit('back')"
          >取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import GroupItem from './GroupItem.vue'
import { getList } from '@/api/auth'
import { getGroupList } from '@/api/group'

export default {
  components: { GroupItem },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    active: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      default: 'account'
    }
  },
  data() {
    return {
      page: 1,
      total: 3,
      pageSize: 5,
      activeSort: '全部',
      tabList: [
        {
          name: '抖音',
          icon: require('@/assets/images/auth/douyin.png'),
          value: 'douyin'
        },
        {
          name: '快手',
          icon: require('@/assets/images/auth/kuaishou.png'),
          value: 'kuaishou'
        },
        {
          name: 'B站',
          icon: require('@/assets/images/auth/bilibili.png'),
          value: 'bilibili'
        }
      ],
      videoList: [],
      checkAll: false,
      platform: 'douyin',
      list: []
    }
  },
  watch: {
    platform() {
      this.getAccountList()
    },
    checkAll(val) {
      this.list.forEach((item) => {
        item.active = val
      })
    },
    type(val) {
      if (val === 'account') {
        this.getAccountList()
      } else {
        this.getGroupList()
      }
    }
  },
  created() {
    if (this.type === 'account') {
      this.getAccountList()
    } else {
      this.getGroupList()
    }
  },
  methods: {
    async getAccountList() {
      const res = await getList({ platform: this.platform })
      if (res.success) {
        this.list = res.result.records.map((item) => {
          item.active = false
          return item
        })
      }
    },
    async getGroupList() {
      const res = await getGroupList()
      if (res.success) {
        this.list = res.result.records.map((item) => {
          item.active = false
          return item
        })
      } else {
        this.$error(res.message)
      }
    },
    handleClose() {
      this.$emit('close')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    async initListByGroup(id = '') {
      return new Promise((resolve) => {
        if (id) {
          getList({ groupId: id }).then((res) => {
            if (res.success) {
              const { records } = res.result
              resolve(records)
            } else {
              this.$message.error(res.message)
              resolve([])
            }
          })
        }
      })
    },
    async submit() {
      if (this.type === 'account') {
        const ids = this.list
          .filter((item) => item.active)
          .map((item) => item.id.toString())
          .join(',')
        this.$emit('ok', {
          value: ids,
          list: this.list
            .filter((item) => item.active),
          type: this.type
        })
      } else {
        const ids = this.list.filter((item) => item.active)
        const funcs = []
        for (let i = 0; i < ids.length; i++) {
          const item = ids[i]
          funcs.push(await this.initListByGroup(item.id.toString()))
        }
        const resultList = []
        Promise.all(funcs).then((res) => {
          res.forEach((item) => {
            if (Array.isArray(item) && item.length) {
              resultList.push(...item)
            }
          })
          this.$emit('ok', {
            value: resultList.map(item => item.id.toString()).join(','),
            list: resultList,
            type: this.type
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.drawer-container {
  box-sizing: border-box;
  padding: 0 20px 20px;
  .icon {
    width: 35px;
    height: 35px;
    margin-right: 14px;
  }
  .drawer-header {
    margin-bottom: 40px;
  }
  .tag {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    background: rgba(56, 56, 56, 0.7);
    box-sizing: border-box;
    padding: 2px 8px;
  }
  .img {
    width: 90px;
    margin-bottom: 16px;
  }
  .name {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .account-item {
    margin-right: 20px;
    margin-bottom: 20px;
    flex-shrink: 0;
  }
  .video-list {
    display: grid;
    height: fit-content;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .video-item-header {
    box-sizing: border-box;
    padding: 4px 6px;
  }
  .video-item {
    height: 248px;
    .poster {
      height: 248px;
    }
  }
}
</style>
